<template>
  <div class="main">
    <div class="dashboard">
      <div class="row full-height padding-full">
        <div ref="left" class="col-12 full-height">
          <div class="row third">
            <statistic></statistic>
          </div>
          <div class="row third">
            <failure-distribution></failure-distribution>
          </div>
          <div class="row third">
            <div class="col-12 full-height padding-right-x">
              <stree></stree>
            </div>
            <div class="col-12 full-height padding-left-x">
              <pm></pm>
            </div>
          </div>
        </div>
        <div ref="left" class="col-12 full-height">
          <div class="row third">
            <div class="col-10 full-height padding-right-x">
              <div class="row second">
                <div class="col-12 full-height padding-right-x padding-bottom-x">
                  <water-meter></water-meter>
                </div>
                <div class="col-12 full-height padding-left-x padding-bottom-x">
                  <ammeter></ammeter>
                </div>
              </div>
              <div class="row second">
                <div class="col-12 full-height padding-right-x padding-top-x">
                  <entrance-guard></entrance-guard>
                </div>
                <div class="col-12 full-height padding-left-x padding-top-x">
                  <barrier-gate></barrier-gate>
                </div>
              </div>
            </div>
            <div class="col-14 full-height padding-left-x">
              <device-alert></device-alert>
            </div>
          </div>
          <div class="row third">
            <div class="col-10 full-height padding-right-x">
              <electrical-watch></electrical-watch>
            </div>
            <div class="col-14 full-height padding-left-x">
              <electrical-alert-trend></electrical-alert-trend>
            </div>
          </div>
          <div class="row third">
            <div class="col-10 full-height padding-right-x">
              <water-watch></water-watch>
            </div>
            <div class="col-14 full-height padding-left-x">
              <water-alert-trend></water-alert-trend>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Statistic from './components/statistic'
import Ammeter from './components/ammeter'
import WaterMeter from './components/water-meter'
import EntranceGuard from './components/entrance-guard'
import BarrierGate from './components/barrier-gate'
import DeviceAlert from './components/device-alert'
import FailureDistribution from './components/failure-distribution'
import WaterAlertTrend from './components/water-alert-trend'
import ElectricalAlertTrend from './components/electrical-alert-trend'
import pm from './components/PM'
import AirQuality from './components/air-quality'
import WaterWatch from './components/water-watch'
import ElectricalWatch from './components/electrical-watch'
import stree from './components/stree'

export default {
  name: 'Monitor',

  components: {
    stree,
    WaterWatch,
    ElectricalWatch,
    Statistic,
    Ammeter,
    WaterMeter,
    EntranceGuard,
    BarrierGate,
    DeviceAlert,
    FailureDistribution,
    WaterAlertTrend,
    ElectricalAlertTrend,
    pm,
    AirQuality
  },

  data () {
    return {}
  },

  mounted () {
  },

  methods: {
    /**
     * 处理栅格大小调整
     * @param {String} i 索引
     * @param {Number} newH 调整后的高度
     * @param {Number} newW 调整后的宽度
     */
    onResize (i, newH, newW) {
      console.log('Resize')
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/base'

.dashboard {
  absolute: left top;
  left: 0;
  size: 100%;
  padding-top: 62px;
  min-width: 800px;
  box-sizing: border-box;
  // overflow: auto;

  .third {
    padding: 5px;
    box-sizing: border-box;
    height: 33.33%
  }
}

.full-height {
  height: 100%
}
.padding-left-x {
  padding-left 5px;
  box-sizing: border-box;
}
.padding-right-x {
  box-sizing: border-box;
  padding-right 5px;
}
.padding-top-x {
  padding-top 5px;
  box-sizing: border-box;
}
.padding-bottom-x {
  box-sizing: border-box;
  padding-bottom 5px;
}
.second {
  height: 50%
}
.padding-full {
  padding: 5px;
  box-sizing: border-box;
}
</style>
